<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>电气数据监控</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 100%;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="chart-container"></div>
    <script>
        // 初始化图表
        const chartDom = document.getElementById('chart-container');
        const myChart = echarts.init(chartDom);

        // 模拟生成大规模电气数据 (实际应用中从API获取)
        function generateMockData(pointCount) {
            const now = new Date();
            const data = [];
            let voltage = 220;
            let current = 10;

            for (let i = 0; i < pointCount; i++) {
                const time = new Date(now - (pointCount - i) * 1000);
                // 模拟电压波动 (220V ± 10%)
                voltage = 220 + Math.sin(i / 100) * 22;
                // 模拟电流波动 (10A ± 30%)
                current = 10 + Math.sin(i / 50) * 3;

                data.push({
                    time: time,
                    voltage: Number(voltage.toFixed(2)),
                    current: Number(current.toFixed(2))
                });
            }
            return data;
        }

        // 生成10万条数据
        const data = generateMockData(100000);

        // 准备图表配置
        const option = {
            title: {
                text: '电气数据监控',
                subtext: '电压/电流趋势图'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    const date = new Date(params[0].value.time);
                    return `
                        ${date.toLocaleString()}<br/>
                        电压: ${params[0].value.voltage} V<br/>
                        电流: ${params[0].value.current} A
                    `;
                }
            },
            legend: {
                data: ['电压', '电流']
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10
            }],
            xAxis: {
                type: 'time',
                boundaryGap: false
            },
            yAxis: [
                {
                    name: '电压 (V)',
                    type: 'value',
                    scale: true,
                    min: 180,
                    max: 260
                },
                {
                    name: '电流 (A)',
                    type: 'value',
                    scale: true,
                    min: 5,
                    max: 15
                }
            ],
            series: [
                {
                    name: '电压',
                    type: 'line',
                    showSymbol: false,
                    data: data.map(item => ({
                        value: [item.time, item.voltage],
                        time: item.time,
                        voltage: item.voltage
                    })),
                    lineStyle: {
                        width: 1
                    },
                    emphasis: {
                        lineStyle: {
                            width: 2
                        }
                    }
                },
                {
                    name: '电流',
                    type: 'line',
                    yAxisIndex: 1,
                    showSymbol: false,
                    data: data.map(item => ({
                        value: [item.time, item.current],
                        time: item.time,
                        current: item.current
                    })),
                    lineStyle: {
                        width: 1
                    },
                    emphasis: {
                        lineStyle: {
                            width: 2
                        }
                    }
                }
            ]
        };

        // 使用大数据模式优化
        option.series.forEach(series => {
            series.large = true;
            series.largeThreshold = 2000;
        });

        // 应用配置
        myChart.setOption(option);

        // 响应窗口大小变化
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    </script>
</body>

</html>